<script lang="ts" setup>
import DetailDialog from "./components/detail-dialog.vue";
import Filter from "./components/filter.vue";
import Handler from "./components/handler.vue";
import Sheet from "./components/sheet.vue";
import { createState } from "./state";
import {
	whManagerBsTbEvaluateReportProjectStatisticYearUsingGet,
	whManagerBsTbEvaluateReportDangerStatisticYearUsingGet,
	whManagerBsTbEvaluateReportReportTypeStatisticYearUsingGet,
} from "@/genapi/wh";
import type {
	WhManagerBsTbEvaluateReportProjectStatisticYearUsingGet,
	WhManagerBsTbEvaluateReportDangerStatisticYearUsingGet,
	WhManagerBsTbEvaluateReportReportTypeStatisticYearUsingGet,
} from "@/genapi/wh";

import { REPORT_TYPE_MAP, THIRD_LEVEL_MAP } from "@/config/enum-map";
import { onMounted, ref } from "vue";

defineOptions({ name: "IndexPage" });
const { page, detailDialogRef } = createState();

const year = ref("2024");

definePage({
	meta: { title: "评价评估报告", order: 2 },
});

let value: number[] = [];

const option1 = ref({
	grid: {
		containLabel: true,
		left: 18,
		top: 10,
		bottom: 5,
		right: 34,
	},
	tooltip: {
		trigger: "axis",
		appendToBody: true,
		axisPointer: {
			lineStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "rgba(255,255,255,0)", // 0% 处的颜色
						},
						{
							offset: 0.5,
							color: "rgba(255,255,255,1)", // 100% 处的颜色
						},
						{
							offset: 1,
							color: "rgba(255,255,255,0)", // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			},
		},
	},
	xAxis: [
		{
			name: "月",
			type: "category",
			boundaryGap: false,
			axisLabel: {
				formatter: "{value}",
				fontSize: 10,
				color: "#798A9B",
			},
			axisLine: {
				lineStyle: {
					color: "#243753",
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#2437530f",
				},
			},
			axisTick: {
				show: false,
			},
			data: [""],
		},
	],
	yAxis: [
		{
			name: "个数",
			boundaryGap: false,
			type: "value",
			axisLabel: {
				fontSize: 10,
				color: "#798A9B",
			},
			splitLine: {
				lineStyle: {
					color: "#2437530f",
				},
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#283352",
				},
			},
			axisTick: {
				show: false,
			},
		},
	],
	series: [
		{
			name: "隐患数量",
			type: "line",
			smooth: true,
			showSymbol: true,
			symbolSize: 3,
			zlevel: 3,
			itemStyle: {
				color: "#0286ff",
				borderColor: "#a3c8d8",
			},
			lineStyle: {
				normal: {
					width: 2,
					color: "#7AD2FB",
				},
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: "rgba(88,255,255,0.2)",
							},
							{
								offset: 0.8,
								color: "rgba(88,255,255,0)",
							},
						],
						false,
					),
				},
			},
			data: value,
		},
	],
});

const option = ref({
	// legend: {
	// 	right: "right",
	// 	orient: "vertical",
	// 	itemWidth: 10,
	// 	itemHeight: 5,
	// 	align: "left",
	// 	top: "middle",
	// },

	series: [
		{
			name: "危险源统计",
			type: "pie",
			radius: [8, 40],
			center: ["20%", "50%"],
			roseType: "radius",
			itemStyle: {
				borderRadius: 4,
			},
			label: {
				show: false,
			},
			data: [{}],
		},
	],
});

const projectCount = ref<number>();
const enterpriseCount = ref<number>();

whManagerBsTbEvaluateReportProjectStatisticYearUsingGet({
	path: {
		year: Number(year.value),
	},
}).then((res) => {
	enterpriseCount.value = res.data?.enterpriseCount;
	projectCount.value = res.data?.projectCount;
});

interface DataType {
	name: string;
	value: number;
}

whManagerBsTbEvaluateReportDangerStatisticYearUsingGet({
	path: {
		year: Number(year.value),
	},
}).then((res: Record<string, any>) => {
	const data: DataType[] = [];
	res.data.forEach((item: Record<string, any>) => {
		data.push({
			name: `${THIRD_LEVEL_MAP[item.dangerLevel]}危险源`,
			value: item.count,
		});
	});

	option.value.series[0].data = data;
});

whManagerBsTbEvaluateReportReportTypeStatisticYearUsingGet({
	path: {
		year: Number(year.value),
	},
}).then((res) => {
	const result = res.data;
	const data: string[] = [];
	result?.forEach((item) => {
		const typeNum = item.reportType as string;
		data.push(REPORT_TYPE_MAP[typeNum]);
		option1.value.xAxis[0].data = data;
		value.push(item.count as number);
	});
});
let dangerSourceValue = ref<any[]>([])
function yearSelect() {
  dangerSourceValue.value = []
	whManagerBsTbEvaluateReportDangerStatisticYearUsingGet({
		path: {
			year: Number(year.value),
		},
	}).then((res: Record<string, any>) => {
		const data: DataType[] = [];
		res.data.forEach((item: Record<string, any>) => {
			data.push({
				name: `${THIRD_LEVEL_MAP[item.dangerLevel]}危险源`,
				value: item.count,
			});
      for(let i = 0; i<data.length; i++){
      dangerSourceValue.value[i] = data[i].value
    }
		});
		option.value.series[0].data = data;
	});

	whManagerBsTbEvaluateReportReportTypeStatisticYearUsingGet({
		path: {
			year: Number(year.value),
		},
	}).then((res) => {
		const result = res.data;
		const data: string[] = [];
		result?.forEach((item) => {
			const typeNum = item.reportType as string;
			data.push(REPORT_TYPE_MAP[typeNum]);
			option1.value.xAxis[0].data = data;
			value.push(item.count as number);
		});
	});

	whManagerBsTbEvaluateReportProjectStatisticYearUsingGet({
		path: {
			year: Number(year.value),
		},
	}).then((res) => {
		enterpriseCount.value = res.data?.enterpriseCount;
		projectCount.value = res.data?.projectCount;
	});
}
onMounted(() => {
  yearSelect()
})
let dangerdata = ref([
  {
    label: '一级危险源',
    color: '#0434D7',
    value: '1',
  },
  {
    label: '二级危险源',
    color: '#045ED7',
    value: '1',
  },
  {
    label: '三级危险源',
    color: '#008CE5',
    value: '1',
  },
  {
    label: '四级危险源',
    color: '#06BBF2',
    value: '1',
  },
  {
    label: '非重大危险源',
    color: '#61F7FD',
    value: '1',
  },
])
</script>

<template>
	<div class="statisticPanel">
		<div class="statisticBox">
			<div class="yearPicker">
				<div flex flex-col>
					<span>报告统计分析</span>
					<el-date-picker
						style="width: 90px"
						v-model="year"
						type="year"
						placeholder="选择年份"
						:clearable="false"
						@change="yearSelect"
						format="YYYY"
						value-format="YYYY"
					/>
				</div>
				<div flex mt-3.5>
					<div w-10 h-10 mr-3>
						<img
							src="../../../../../public/编组 4 7.png"
							alt=""
							w-full
							h-full
						/>
					</div>
					<div mb-1>
						<div text-lg class="text-[#409EFF]">
							{{ projectCount }}/{{ enterpriseCount }}
						</div>
						<div text-sm class="text-[#838383]">项目/企业总数</div>
					</div>
				</div>
			</div>

			<el-divider direction="vertical" />
			<div class="chartBox">
				<BaseEchart :option="option"></BaseEchart>
			</div>
      <div grid="~ cols-2 gap-x-20px gap-y-6px" style="margin-left: -350px;">
      <div
        v-for="(item,index) in dangerdata"
        :key="item.label"
        h="26px"
        w="200px"
        flex="~ items-center"
        b="#86B6C4/50 1px solid"
        rd="15px"
        p="x-15px"
        bg="#36D1F0/10"
        text="#606266"
      >
        <span rd="4px" size="6px" :style="{ background: item.color }" />
        <span flex="1" p="x-14px" 
        style="font-weight: 500;
              font-size: 13px;
              color: #606266;
              font-style: normal;"
          >{{ item.label }}</span>
        <span style="font-weight: 500;
              font-size: 13px;
              color: #606266;
              font-style: normal;"
          >{{ dangerSourceValue[index] }}</span>
      </div>
    </div>
			<el-divider direction="vertical" />
			<div class="chartBox">
				<BaseEchart :option="option1"></BaseEchart>
			</div>
		</div>
	</div>

	<page-content>
		<template #header>
			<Filter />
			<Handler />
		</template>
		<Sheet />
		<DetailDialog ref="detailDialogRef" />
		<template #footer>
			<el-pagination
				v-model:current-page="page.currentPage.value"
				v-model:page-size="page.pageSize.value"
				:disabled="page.isLoading.value"
				:total="page.total.value"
			/>
		</template>
	</page-content>
</template>

<style scoped lang="scss">
.statisticPanel {
	background-color: #fff;
	margin: 20px 20px 0px 20px;
	height: 120px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.statisticBox {
		width: 95%;
		height: 80%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0px 15px;
		background-color: #cdeaff59;
		.yearPicker {
			width: 20%;
			height: 75%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				font-size: 18px;
				font-weight: 600;
			}
		}
		.chartBox {
			width: 30%;
			height: 100%;
		}
	}
}
</style>
